layui.config({
    base: '../../layui/' //此处路径请自行处理, 可以使用绝对路径
}).extend({
    formSelects: 'formSelects-v4'
}).use(['jquery', 'formSelects', 'element', 'upload','form','layer'], function () {
    let table = layui.table,
        form = layui.form,
        $ = layui.jquery,
        util = layui.util,
        upload = layui.upload,
        element = layui.element;

    // //拖拽上传
    upload.render({
        elem: '#uploadFile'
        ,drag:true
        ,accept:'file'
        // , auto: false
        ,url: '/server/upload'
        ,done: function(res){
        }
        , before: function(obj) {
            this.data = {
                ip:$('#ip').val(),
                path:$('#filePath').val()
            };

        }
        , choose: function (obj) {
            obj.preview(function (index, file, result) {
                var fileList = $("#fileList");
                var size = changeSize(file.size);
                var tr = $(['<tr id="upload-' + index + '">'
                    , '<td>' + file.name + '</td>'
                    , '<td><div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="progress-file-' + index + '"><div class="layui-progress-bar layui-btn-blue" lay-percent="0%"></div></div></td>'
                    , '<td></td>'
                    , '<td></td>'
                    , '<td>' +size  + '</td>'
                    , '</tr>'].join(''));

                fileList.append(tr);
                element.render('progress'); //渲染新加的进度条组件
            });
        }
    });

    $(function (){
        uploadWebsocket()
    })

    //日志实时更新
    function uploadWebsocket() {
        //websocket对象
        let websocket = null;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://" + sessionStorage.getItem('hostName') + "/websocket/logging");
        } else {
            console.error("不支持WebSocket");
        }
        //连接发生错误的回调方法
        websocket.onerror = function (e) {
            console.error("WebSocket连接发生错误", e);
        };
        //连接成功建立的回调方法
        websocket.onopen = function () {
            console.log("WebSocket连接成功")
        };
        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            //追加
            if (event.data) {
                let data = $.parseJSON(event.data);
                if (data.table == "serverUpload" && data.ip== $('#ip').val()) {
                    $("#fileList").find("tr").each(function () {
                        const id = $(this).attr("id")
                        const index = id.replace("upload-", "")
                        const filename = $(this).find("td").eq(0).text();
                        if (filename == data.name) {
                            if (data.speedOfProgress != null && data.speedOfProgress != '') {
                                element.progress('progress-file-' + index, data.speedOfProgress); //执行进度条。n 即为返回的进度百分比
                            }
                            $(this).find("td").eq(2).html(data.transfered);
                            $(this).find("td").eq(3).html(data.speed);
                            element.render()
                        }
                    })
                }
            }
        };
        //连接关闭的回调方法
        websocket.onclose = function () {
            console.log("WebSocket连接关闭")
        };
    }
})